<template>
  <div style="background-color:#999">
    <h3>event组件</h3>
    <span>内容</span>
    <!-- 原生DOM绑定原生事件 -->
    <button @click="handler1">原生DOM绑定原生事件</button>
    <!-- 组件绑定原生事件，必须加 '.native'，否则作为自定义事件使用 ,
      此时相当于给子组件的根节点绑定了点击事件，但是点击event1中的所有内容都能够生效----事件的委派
    -->
    <event1 @click.native="handler2"></event1>
    <!-- 原生DOM绑定自定义事件,没有意义，因为没有$emit -->
    <button @xxx="handler3">原生DOM绑定自定义事件</button>
    <!-- 组件绑定原生事件，不加 '.native'，但是组件内部有click事件 -->
    <event2 @click="handler4" @xxx="handler4"></event2>
  </div>
</template>

<script>
import Event2 from '@/pages/test/event//Event2'
import Event1 from '@/pages/test/event/Event1'
// import Event1 from './Event1.vue'
// import Event2 from './Event2.vue'

export default {
  name:'EventTest',
  components:{Event2,Event1},
  methods:{
    handler1(){
      console.log('原生DOM绑定原生事件');
    },
    handler2(){
      console.log('组件绑定原生事件');
    },
    handler3(){
      console.log('原生DOM绑定自定义事件');
    },
    handler4(params){
      console.log('组件绑定原生事件，不加 .native，但是组件内部有click事件**',params);
    }
  }
};
</script>

<style scoped>
span {
  padding: 10px;
}
</style>